<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="icon" href="images/icons/favicon.png"/> -->
        <title>成都梅鑫商贸有限公司</title>
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
     
        <link href="css/style.css" rel="stylesheet">

        <link href="css/responsive.css" rel="stylesheet">
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <style>
            #page,body{
                background:#F8F8F8;  
            }
            .header-container{
                background:white;
            }
              
        </style>
    </head>
    <body>
        <div id="page">
            <!--header--->
            <header class="header-container">
                <div class="container">
                    <div class="top-row">
                        <div class="row">
                            <div class="col-md-2 col-sm-6 col-xs-6">
                                <div id="logo">
                                        <a href="index.html"><img src="images/logo.png" alt="logo" class="logo hidden-sm hidden-xs"></a>  
                                        <a href="index.html"><img src="images/flogo.png" alt="logo" class="logo"></a>     
                                </div>                       
                            </div>
                            <div class="col-sm-6 visible-sm">
                                    <div class="text-right search">
                                            <input type="text" placeholder="搜索课程名称">
                                            <img src="images/search.png" alt="">
                                            <div class="myava">
                                                <!-- <a href="" class="login">登录</a>/
                                                <a href="">注册</a> -->
                                                <a href="">hahah</a>
                                            </div>
                                            <img src="images/ava.png" alt="">
                                    </div>
                            </div>
                            <div class="col-md-6 col-sm-12 col-xs-12 remove-padd">
                                <nav class="navbar navbar-default">
                                    <div class="navbar-header page-scroll">
                                        <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                                            <span class="sr-only">Toggle navigation</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>

                                    </div>
                                    <div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
                                        <ul class="list-unstyled nav1 cl-effect-10">
                                            <li><a data-hover="首页"  href="./index.html"><span>首页</span></a></li>
                                            <li><a data-hover="我的学习"  href="./mycourse.html"><span>我的学习</span></a></li>
                                            <li><a data-hover="我的收藏"  href="./mycollect.html"><span>我的收藏</span></a></li>
                                            <li><a data-hover="消息"  href="./message.html"><span>消息</span></a></li>
                                            <li><a data-hover="会员中心" href="./myvip.html"><span>会员中心</span></a></li>                                        
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                            <div class="col-md-4  col-sm-4 col-xs-12 hidden-sm">
                                <div class="text-right search">
                                    <div class="research">
                                        <input type="text" placeholder="搜索课程名称">
                                        <img src="images/search.png" alt="">
                                    </div>
                                
                                    <div class="myava">
                                        <!-- 未登录样式 -->
                                        <a href="" class="login">登录</a>/
                                        <a href="">注册</a>
                                        <!-- 登录样式 -->
                                        <!-- <a href="" class="username">你走看看</a>
                                        <img src="images/ava.png" alt="" class="ava"> -->
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!--end-->
            <!-- 面包屑导航 -->
            <div class="container">
                <span class="bread_nav">首页 > IT互联网 > 编程语言 > 课程详情 </span>
            </div>
            <!-- 视频简介-->
            <div class="container" style="height:400px;">
                <div class="video_desc">
                    <div>
                        <video src="./video/test.mp4" controls id="myvideo"></video>
                    </div>
                    <div class="v_detail">
                        <h3>老九零基础写编程系列之c语言列之c语言列之c语言</h3>
                        <div class="v_time">
                            <span class="v_color">课时数：22</span>
                            <span class="v_color">浏览数：22</span>
                        </div>
                        <div class="v_teacher">
                                <p class="v_color">主讲人：余胜军</p>
                                <p class="v_color">课程有效期：永久有效</p>
                                <p class="v_color">类别：会员免费</p>
                        </div>                    
                        <!-- 点击收藏 -->
                        <div class="mysc">
                            <img src="./images/shoucang.png" alt="" class="v_sc">
                            <span class="v_color">收藏</span>
                        </div>
                    </div>
                </div>   
            </div>
            <!-- 课程详情 -->
            <div class="container mykecheng"  style="margin-top:20px;height:1204px;;">
                <div class="myallkecheng" style="display:flex;width:100%;">
                <!-- 课程详情左边 -->
                    <div class="kecheng_left" style="width:65%;background:white;">
                        <div class="v_nav">
                            <span data-target="#course_index" class="v_nav_active">课程目录</span>
                            <span data-target="#course_detail">课程详情</span>
                        </div>
                        <div class="v_nav_content">
                         <div id="course_index" class="v_nav_item"  style="z-index: 10;">
                                <div class="course_index_item">
                                    第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item course_index_item_active">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                                <div class="course_index_item">
                                        第一节 - 如何定义变量
                                </div>
                            </div>
                            <div id="course_detail">                                
                                   <div class="neirong">
                                        在这里给大家介绍到，怎么样解决在集群的情况情况下，保证定时任务的幂等性问题。
                                        常用四种解决方案：
                                        ①使用zookeeper，实现分布式锁解决.
                                        ②使用配置文件，加上开关，在打war时，标识是否启动.
                                        ③使用数据库唯一约束,启动时，往数据库插入一条记录，如果报错，就不执行任务
                                        ④使用分布式任务平台，强烈推荐，因为简单，支持集群，容错，可配置，分片化。
                                        <br>
                                        ---------------------------------------------------------------------------------------                                   
                                        <br>
                                        
                                        原理分析：
                                        在大型电商互联网公司中，都有专门自己的分布式任务调度平台工具，其实分布式
                                        调度平台原理非常简单，就是将所有的任务调度全部存放在一个任务调度中心，
                                        让后再使用任务调度中心转发到具体要执行job的地址，类似nginx反向代理，这样就可以解决，
                                        每次执行时保证幂等性，不被重复问题。
                                   </div>     
                            </div>
                        </div>
                    </div>
                    <!-- 课程详情右边 -->
                    <div class="kecheng_right hidden-sm hidden-xs" style="margin-left:20px;width:34%;background:white;">
                        <div>
                            <div class="v_nav">
                                    <span class="hot_recmonded ">推荐视频</span> 
                            </div>
                        </div>                       
                        <div class="hot_recmonded_item">
                                <div class="coure_item1" >
                                    <div class="mask">
                                        <a href=""  class="start_learn">开始学习</a>
                                    </div>
                                    <img src="images/flower.png" alt="" class="cour_pic">                          
                                    <p>【PS教程合集】</p>
                                    <p>零基础到精通PS精讲课程，30万学员都在学的.</p>
                                    <div class="teacher">
                                        <img src="images/avait.png" alt="">
                                        <span>资深phython工程师</span>
                                        <span>小布老师</span>
                                    </div>
                                </div>
                                <div class="coure_item1" >
                                    <div class="mask">
                                        <a href=""  class="start_learn">开始学习</a>
                                    </div>
                                    <img src="images/flower.png" alt="" class="cour_pic">                          
                                    <p>【PS教程合集】</p>
                                    <p>零基础到精通PS精讲课程，30万学员都在学的.</p>
                                    <div class="teacher">
                                        <img src="images/avait.png" alt="">
                                        <span>资深phython工程师</span>
                                        <span>小布老师</span>
                                    </div>
                                </div>
                                <div class="coure_item1" >
                                    <div class="mask">
                                        <a href=""  class="start_learn">开始学习</a>
                                    </div>
                                    <img src="images/flower.png" alt="" class="cour_pic">                          
                                    <p>【PS教程合集】</p>
                                    <p>零基础到精通PS精讲课程，30万学员都在学的.</p>
                                    <div class="teacher">
                                        <img src="images/avait.png" alt="">
                                        <span>资深phython工程师</span>
                                        <span>小布老师</span>
                                    </div>
                                </div>

                        </div>
                    </div>
                </div>
                <!--  -->
                
            </div>
            
            <!--  footer-->     
            <footer>
                    <div class="fp" > 
                        <div class="footer_detal">
                            <img src="images/flogo.png" alt="">
                            <p>我的学习 | 我的收藏 </p>
                            <p>联系方式：028-84400396</p>
                            <p class="copyright">
                                © Copyright 2016-现在 成都梅鑫商贸有限公司 版权所有 huke88.com  
                            </p>
                        </div>
                        <div class="erweima text-center">
                            <p class="focus">关注微信公众号</p>
                            <img src="images/erweima.png" alt="">
                        </div>
                    </div>
                    
            
            </footer>
            <!-- 侧边栏 -->
            <aside class="hidden-sm hidden-xs">
                <div>
                    <img src="images/mes.png" alt="" onmouseout="this.src = 'images/mes.png'" onmouseenter="this.src = 'images/mes_active.png'" >
                    <div class="kefu">
                        <span>客服QQ:23698541121</span>
                        <span>工作日：9：00-19:00</span>
                    </div>
                </div>
                <div>              
                    <img src="images/phone.png" class="kefu_phone" alt=""  onmouseout="this.src = 'images/phone.png'" onmouseenter="this.src = 'images/phone_active.png'" >
                    <div class="weixin">
                            <img src="images/weixin.png" alt="" class="vx">
                    </div>
                </div>
                <div>
                    <img src="images/backtop.png"  class="kefu_backtop backtop" alt=""  onmouseout="this.src = 'images/backtop.png'" onmouseenter="this.src = 'images/backtop_active.png'">
                </div>
            </aside>
            <!--点击登录 -->
            <div class='mylogin_mask'>
                <div class="mylogin">
                    <div class="text-right guanbi">
                        <img src="images/guanbi.png" alt="" class="close_dilog">
                    </div>
                    <div class="loginbar">
                        <span   data-target="#login" class="text-center login_active" >登录</span>
                        <span  data-target="#register"  class="text-center">注册</span>
                    </div>
                    <div class="mylogs">
                        <div id="login" style="z-index: 10;">
                            <form action="">
                                <div class="login_item">
                                    <img src="images/logphone.png" alt="" class="logphone">
                                    <input type="text" placeholder="手机号码">
                                </div>
                                <div class="login_item">
                                    <img src="images/password.png" alt="" class="logphone">
                                    <input type="text" placeholder="密码">
                                </div>
                                <div class="forgetpwd">
                                    <div style="display: flex;align-items: center">
                                    <input type="checkbox" value="">
                                        自动登录
                                    </div>
                                    <a href="" class="rsetpwd">忘记密码？</a>
                                </div>
                                <div class="logbtn">
                                    <input type="button" value="登录">
                                </div>
                            </form>
                        </div>
                        <div id="register" style="display: none">
                            <form action="">
                                <div class="login_item">
                                    <img src="images/logphone.png" alt="" class="logphone">
                                    <input type="text" placeholder="手机号码">
                                </div>
                                <div class="login_item">
                                    <img src="images/nichen.png" alt="" class="logphone">
                                    <input type="text" placeholder="昵称">
                                </div>
                                <div class="login_item">
                                    <img src="images/password.png" alt="" class="logphone">
                                    <input type="text" placeholder="密码">
                                </div>
                                <div class="login_item">
                                    <img src="images/password.png" alt="" class="logphone">
                                    <input type="text" placeholder="确认密码">
                                </div>
                                <div class="login_item" style="display: flex;justify-content: space-between">
                                    <div >
                                        <img src="images/yz.png" alt="" class="logphone">
                                        <input type="text" placeholder="短信验证码" >
                                    </div>
                                    <span class="rsetpwd">发送验证码</span>
                                </div>
                                <div class="logbtn">
                                    <input type="button" value="注册">
                                </div>
                            </form>
                        </div>
                    </div>
                </div> 

            </div>
        </div>
        <script>
    // 切换导航内容
    function change_pro(elem,a,b){
            $(elem).click((e)=>{
            if(e.target.nodeName == a){
            let $a = $(e.target);
            $a.addClass(b)
                .siblings()
                .removeClass(b);
            let id = $a.attr("data-target");                 
                $(id).css({"zIndex":"10",
                        "display":"block"
                })             
                    .siblings().css({"zIndex":"",
                        "display":"none"
                }); 
            }    
        })
    }

change_pro($(".v_nav"),"SPAN","v_nav_active");
change_pro($(".loginbar"),"SPAN","login_active")  
            
    // 回到顶部        
    $(".backtop").click(function () {
    $("html,body").animate({ scrollTop: 0 },1000); //回到顶部
});
// 点击登录
$(".login").click(function(e){
    e.preventDefault()
    $(".mylogin_mask").show()
})
// 关闭登录页面
$(".close_dilog").click(function(){
    $(".mylogin_mask").hide();
})
        </script>
    </body>
</html>
